<template>
    <div class="main-content">
        <TableLayout form-title="">
            <div slot="form-title" class="table-title"></div>
            <el-form :model="query" ref="query" :rules="rules" slot="form" label-width="100px" label-position="right">
                <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="申请日期"> 
                            <el-row>
                                <el-col :span="11">
                                    <el-date-picker v-model="query.startDate" :editable="false" type="date" placeholder="选择开始日期" :picker-options="pickerOptions1" @change="startDateChange" style="width:100%">
                                    </el-date-picker>
                                </el-col>
                                <el-col :span="2" align="center">-</el-col>
                                <el-col :span="11">
                                    <el-date-picker v-model="query.endDate" :editable="false" type="date" placeholder="选择结束日期" :picker-options="pickerOptions2"  @change="endDateChange" style="width:100%">
                                    </el-date-picker>
                                </el-col>
                            </el-row>              
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="操作状态">
                            <el-select v-model="query.status" placeholder="请选择" style="width:100%;">
                                <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="银行卡账户名" prop="bankRealName">
                            <el-input v-model="query.bankRealName" placeholder="请输入" style="width:100%"></el-input>
                        </el-form-item>
                    </el-col>
                    <!-- <el-col :span="8">
                        <el-form-item label="省份" prop="provinceId">
                            <province v-model="query.provinceId"></province>
                        </el-form-item>
                    </el-col> -->
                </el-row>
                <!-- <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="市区" prop="cityId">
                            <city v-model="query.cityId" :province="query.provinceId"></city>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="区县" prop="areaId">
                            <region v-model="query.areaId" :city="query.cityId"></region>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="银行卡账户名" prop="bankRealName">
                            <el-input v-model="query.bankRealName" placeholder="请输入" style="width:100%"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row> -->
                <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="银行卡号" prop="cardNumber">
                            <el-input v-model="query.cardNumber" placeholder="请输入" style="width:100%"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="e学云ID号" prop="eCode">
                            <el-input v-model="query.eCode" placeholder="请输入" style="width:100%" :maxlength="10"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="手机号" prop="phone">
                            <el-input v-model="query.phone" placeholder="请输入" style="width:100%" :maxlength="11"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <div class="top-line">
                    <el-button type="primary" class="top-btn" @click="onSubmit('query')">查询</el-button>
                </div>
            </el-form>
            <div class="table-title" slot="table-title">
                <div class="btnPosition">
                    <el-button v-if="batchState" type="text" class="btn-success" @click="selectFinish()">完成</el-button>
                    <el-button v-if="batchState" type="text" class="btn-success" @click="selectCancel()">取消</el-button>
                    <el-button @click="exportTable()">导出</el-button>
                    <el-button :disabled="batchState == '0'" @click="batchThrough()">批量通过</el-button>
                    <el-button :disabled="batchState == '1'" @click="batchComplete()">批量完成</el-button>
                </div>
            </div>
            <el-table :data="tableData" ref="multipleTable" border v-loading="loading" style="width: 100%"  @selection-change="handleSelectionChange">
                <el-table-column v-if="batchState" type="selection" width="55" :selectable="fn"></el-table-column>
                <el-table-column label="申请时间" width="170" align="center">
                    <template scope="scope">
                        <span>{{scope.row.applyTime | isNull}}</span>
                    </template>
                </el-table-column>
    
                <el-table-column label="e学云ID号" align="center">
                    <template scope="scope">
                        <span>{{scope.row.eCode | isNull}}</span>
                    </template>
                </el-table-column>
    
                <el-table-column label="姓名（用户名）" align="center" width="120">
                    <template scope="scope">
                        <span>{{scope.row.userName | isNull}}</span>
                    </template>
                </el-table-column>
    
                <el-table-column label="所属区域" align="center">
                    <template scope="scope">
                        <span>{{scope.row.adress=='null_null_null'?'---':scope.row.adress}}</span>
                    </template>
                </el-table-column>

                <el-table-column label="手机号" align="center">
                    <template scope="scope">
                        <span>{{scope.row.phone | isNull}}</span>
                    </template>
                </el-table-column>

                <el-table-column label="提现金额" align="center">
                    <template scope="scope">
                        <span>{{ !scope.row.withdrawalCash?'--':Number(scope.row.withdrawalCash).toFixed(2) }}</span>
                    </template>
                </el-table-column>

                <el-table-column label="银行卡号" align="center">
                    <template scope="scope">
                        <span>{{scope.row.cardNumber | isNull}}</span>
                    </template>
                </el-table-column>

                <el-table-column label="所属银行" align="center">
                    <template scope="scope">
                        <span>{{scope.row.bankName | isNull}}</span>
                    </template>
                </el-table-column>

                <el-table-column label="开户行" align="center">
                    <template scope="scope">
                        <span>{{scope.row.bankDesc | isNull}}</span>
                    </template>
                </el-table-column>

                <el-table-column label="银行卡账户名" align="center" width="120">
                    <template scope="scope">
                        <span>{{scope.row.bankRealName | isNull}}</span>
                    </template>
                </el-table-column>

                <el-table-column label="完成时间" width="170" align="center">
                    <template scope="scope">
                        <span>{{scope.row.finishTime | isNull}}</span>
                    </template>
                </el-table-column>

                <el-table-column label="操作人" align="center">
                    <template scope="scope">
                        <span>{{scope.row.auditorName | isNull}}</span>
                    </template>
                </el-table-column>

                <el-table-column label="操作状态" align="center">
                    <template scope="scope">
                        <!-- 0.未审核 1.处理中 2.已结算 3.已驳回 -->
                        <span>{{scope.row.status=='0'?'未审核':scope.row.status=='1'?'处理中':scope.row.status=='2'?'已结算':scope.row.status=='3'?'已驳回':'--'}}</span>
                        <!-- <span>{{scope.row.status=='0'?'未审核':scope.row.status=='1'?'处理中':scope.row.status=='2'?'已驳回':scope.row.status=='3'?'已结算':scope.row.status=='4'?'已驳回':''}}</span> -->
                    </template>
                </el-table-column>

                <el-table-column label="操作" min-width="120px">
                    <template scope="scope">
                        <el-button v-if="scope.row.status=='0'" type="text" class="btn-success" @click="pass(scope.row)">通过</el-button>
                        <el-button v-if="scope.row.status=='0'" type="text" class="btn-success" @click="reject(scope.row)">驳回</el-button>
                        <el-button v-if="scope.row.status=='1'" type="text" class="btn-success" @click="finish(scope.row)">完成</el-button>
                        <el-button v-if="scope.row.status=='1'" type="text" class="btn-success" @click="fail(scope.row)">失败</el-button>
                        <span v-if="scope.row.status!='0' && scope.row.status!='1'">---</span>
                    </template>
                </el-table-column>

                <el-table-column label="原因" align="center">
                    <template scope="scope">
                        <span>{{scope.row.auditDesc | isNull}}</span>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-container">
                <el-pagination layout="total, sizes, prev, pager, next, jumper" :total="pageQuery.total" :current-page.sync="pageQuery.currentpage" :page-sizes="config.pageSizes" :page-size="config.pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </TableLayout>

        <!-- 批量通过 -->
        <batch-through :batchThroughData='batchThroughData' @search='queryData'></batch-through>

        <!-- 批量完成 -->
        <batch-complete :batchCompleteData='batchCompleteData' @search='queryData'></batch-complete>

        <!-- 失败 -->
        <fail-withdraw :failData='failData' @search='queryData'></fail-withdraw>

        <!-- 驳回 -->
        <reject-withdraw :rejectData='rejectData' @search='queryData'></reject-withdraw>

    </div>
</template>

<script>
    import moment from 'moment';
    import Levelbar from '../../layout/Levelbar';
    import TableLayout from 'components/TableLayout';
    import province from 'components/CascadeRegion/province';
    import city from 'components/CascadeRegion/city';
    import region from 'components/CascadeRegion/region';
    import batchThrough from './batchThrough';
    import batchComplete from './batchComplete';
    import failWithdraw from './failWithdraw';
    import rejectWithdraw from './rejectWithdraw';
    import { queryWithdrawal, getAudit } from 'api/integralManage';
    import { mapState, mapActions } from 'vuex';
    import validate from '@/utils/validate';

    export default {
        name: 'withdrawTable',
        components: { Levelbar, TableLayout, province, city, region, batchThrough, batchComplete, failWithdraw, rejectWithdraw },
        data() {
            return { 
                batchState: '',
                batchThroughData: {
                    dialogState: false,
                    multipleSelection: []
                },
                batchCompleteData: {
                    dialogState: false,
                    multipleSelection: []
                },
                failData: {
                    dialogState: false,
                    id: ''
                },
                rejectData: {
                    dialogState: false,
                    id: ''
                },
                loading: true,  
                tableData: [],
                multipleSelection: [],
                pageQuery: {
                    currentpage: 1,
                    total: 0
                },
                query: {
                    startDate: '',
                    endDate: '',
                    eCode: '', 
                    phone: '', 
                    provinceId: '', 
                    cityId: '',
                    areaId: '', 
                    cardNumber: '', 
                    status: '', 
                    bankRealName: '' 
                },

                // 0.未审核 1.处理中 2.已结算 3.已驳回
                statusList: [{
                    value: '',
                    label: '请选择'
                }, {
                    value: '0',
                    label: '未审核'
                }, {
                    value: '1',
                    label: '处理中'
                }, {
                    value: '2',
                    label: '已结算'
                }, {
                    value: '3',
                    label: '已驳回'
                }],
                pickerOptions1: {
                    // disabledDate(time) {
                    //     return (time.getTime()) > (Date.now() - 3600 * 1000 * 24);
                    // }
                },
                pickerOptions2: {
                    // disabledDate(time) {
                    //     return (time.getTime()) > (Date.now() - 3600 * 1000 * 24);
                    // }
                },
                rules: {
                    eCode: [...validate.exueCode()],
                    phone: [...validate.phone()]
                
                }
            }
        },
        created() {
            this.queryData();
        },
        computed: {
            ...mapState({
                config: state => state.config.table
            })
        },
        methods: {
            ...mapActions(['ChangePageSize']),
            handleSizeChange(val) {
                this.pageQuery.currentpage = 1;
                this.ChangePageSize(val);
                this.queryData();
            },
            handleCurrentChange(val) {
                this.pageQuery.currentpage = val;
                this.queryData();
            },
            onSubmit(ruleForm) {
                this.$refs[ruleForm].validate((valid) => {
                    if (valid) {
                        this.pageQuery.currentpage = 1;
                        this.queryData();
                    } else {
                        return false;
                    }
                });
            },
            queryData() {
                if (this.batchState != '') {
                    this.batchState = '';
                    this.$refs.multipleTable.clearSelection();
                    this.multipleSelection = [];
                    this.batchCompleteData.multipleSelection = [];
                    this.batchThroughData.multipleSelection = [];
                }

                let eCode = this.query.eCode; // e学账号（可模糊查询）
                let phone = this.query.phone; // 手机号
                let provinceId = this.query.provinceId; // 省id
                let cityId = this.query.cityId; // 市id
                let areaId = this.query.areaId; // 区县id
                let dataStart = this.query.startDate==''?'':moment(this.query.startDate).format('YYYY-MM-DD'); // 查询开始时间
                let dataEnd = this.query.endDate==''?'':moment(this.query.endDate).format('YYYY-MM-DD'); // 查询结束时间 
                let cardNumber = this.query.cardNumber; // 卡号（可模糊查询）
                let status = this.query.status; // 操作状态 (-1:删除,0:已申请,1:申请通过,2:申请未通过,3:操作成功,4:操作失败)
                let bankRealName = this.query.bankRealName; // 银行卡账户名（可模糊查询）             
                queryWithdrawal(
                    this.pageQuery.currentpage,
                    this.config.pageSize,
                    eCode, 
                    phone, 
                    provinceId, 
                    cityId, 
                    areaId, 
                    dataStart, 
                    dataEnd, 
                    cardNumber, 
                    status, 
                    bankRealName            
                ).then(response => {
                    this.loading = false;
                    if (response.data.content) {
                        this.tableData = response.data.content.list;
                        this.pageQuery.total = response.data.content.pagination.total;
                    } else {
                        this.tableData = [];
                    }
                    
                }).catch(() => {
                    this.loading = false;
                })
            },
            startDateChange(date) {
                this.pickerOptions2 = {
                    disabledDate(time) {
                        return (time.getTime() < new Date(date).getTime() - 864e5);
                        // return (time.getTime() < new Date(date).getTime()) || (time.getTime() > new Date().getTime() - 864e5);
                    }
                }
            },
            endDateChange(date) {
                this.pickerOptions1 = {
                    disabledDate(time) {
                        return (time.getTime() > new Date(date).getTime());
                    }
                } 
            },

            // 导出
            exportTable() {

                let eCode = this.query.eCode; // e学账号（可模糊查询）
                let phone = this.query.phone; // 手机号
                let provinceId = this.query.provinceId; // 省id
                let cityId = this.query.cityId; // 市id
                let areaId = this.query.areaId; // 区县id
                let dataStart = this.query.startDate==''?'':moment(this.query.startDate).format('YYYY-MM-DD'); // 查询开始时间
                let dataEnd = this.query.endDate==''?'':moment(this.query.endDate).format('YYYY-MM-DD'); // 查询结束时间 
                let cardNumber = this.query.cardNumber; // 卡号（可模糊查询）
                let status = this.query.status; // 操作状态 (-1:删除,0:已申请,1:申请通过,2:申请未通过,3:操作成功,4:操作失败)
                let bankRealName = this.query.bankRealName; // 银行卡账户名（可模糊查询）  
                console.log(`${LOCAL_API.cm}/point/manage/outExcelByWithdrawal?eCode=${eCode}&phone=${phone}&provinceId=${provinceId}&cityId=${cityId}&areaId=${areaId}&dataStart=${dataStart}&dataEnd=${dataEnd}&cardNumber=${cardNumber}&status=${status}&bankRealName=${bankRealName}`);
                window.location.href = `${LOCAL_API.cm}/point/manage/outExcelByWithdrawal?eCode=${eCode}&phone=${phone}&provinceId=${provinceId}&cityId=${cityId}&areaId=${areaId}&dataStart=${dataStart}&dataEnd=${dataEnd}&cardNumber=${cardNumber}&status=${status}&bankRealName=${bankRealName}`;
            },

            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            fn(row) {
                if (row.status == this.batchState) {
                    return true;
                } else {
                    return false;
                }
            },

            // 批量通过
            batchThrough() {
                this.batchState = '0';
                this.$refs.multipleTable.clearSelection();
                this.multipleSelection = [];
                this.batchCompleteData.multipleSelection = [];
            },

            // 批量完成
            batchComplete() {
                this.batchState = '1';
                this.$refs.multipleTable.clearSelection();
                this.multipleSelection = [];
                this.batchThroughData.multipleSelection = [];
            },

            // 选择完成
            selectFinish() {
                if (this.batchState == '0') {
                    if (this.multipleSelection.length == 0) {
                        this.$message.info('请选择列表项');     
                    } else {
                        this.batchThroughData.dialogState = true;
                        this.batchThroughData.multipleSelection = this.multipleSelection;
                    }
                } else if (this.batchState == '1') {
                    if (this.multipleSelection.length == 0) {
                        this.$message.info('请选择列表项');     
                    } else {
                        this.batchCompleteData.dialogState = true;
                        this.batchCompleteData.multipleSelection = this.multipleSelection;
                    }
                }
            },

            // 取消选择
            selectCancel() {
                this.$refs.multipleTable.clearSelection();
                this.multipleSelection = [];
                this.batchCompleteData.multipleSelection = [];
                this.batchThroughData.multipleSelection = [];
                this.batchState = '';
            },

            // 通过
            pass(obj) {
                
                let status = '1'; // 1:通过  2：完成  3：驳回  4：失败”,
                let id = obj.id; // 记录对应id”  
                let auditDesc = '';
                this.loading = true;
                getAudit(status, id, auditDesc).then(response => {
                    this.loading = false;
                    if (response.data.status == 200) {
                        this.$message.success(response.data.errorMsg);
                        this.queryData();
                    } else {
                        this.$message.error(response.data.errorMsg);
                    }
                }).catch(() => {
                    this.loading = false;
                })
            },

            // 完成
            finish(obj) {
                this.$confirm('确认完成打款？', '', {
                    closeOnClickModal: false,
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: ' ', 
                    title: '  '
                }).then(() => {
                    let status = '2'; // 1:通过  2：完成  3：驳回  4：失败”,
                    let id = obj.id; // 记录对应id”  
                    let auditDesc = '';
                    this.loading = true;
                    getAudit(status, id, auditDesc).then(response => {
                        this.loading = false;
                        if (response.data.status == 200) {
                            this.$message.success(response.data.errorMsg);
                            this.queryData();
                        } else {
                            this.$message.error(response.data.errorMsg);
                        }
                    }).catch(() => {
                        this.loading = false;
                    })
                }).catch((e) => {
                    this.$message.info('已取消');     
                });
            },

            // 驳回
            reject(obj) {
                this.rejectData.dialogState = true;
                this.rejectData.id = obj.id;
            },

            // 失败
            fail(obj) {
                this.failData.dialogState = true;
                this.failData.id = obj.id;
            }
        }

    }
</script>

<style lang="scss" scoped>

</style>

